<template>
   <span>获取验证码({{ time }}s)</span>
</template>

<script setup lang="ts">
//引入组合式api
import {ref,watch} from 'vue'
//定义秒数
let time = ref<number>(5);
//接收父组件传递的数据
let props = defineProps(['flag'])
//接收自定义事件
let $emit = defineEmits(['changeFlag'])
//监视父组件传递的数据
watch(()=>props.flag,()=>{
   //如果为真，则开始计时
   if(props.flag) {
      let timer = setInterval(()=>{
         time.value--;
         if(time.value<=0) {
            //停止定时器
            clearInterval(timer);
            //给父组件传递数据
            $emit('changeFlag',false)
         }
      },1000)
   }
},{
   //开始就监视
   immediate:true
})
</script>

<style scoped>

</style>